<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style="margin-top:12px;">
        <div class="typebox">
          <div v-for="(item,index) in typeitems" :key="index" @click="onTypeitem(index)">
            <div
              class="typeitem"
              :class="typeIndex==index?'active':''"
            >{{item.text}}({{item.count}})
            </div>
          </div>
        </div>
      </div>

      <scroller
        @on-pullup-loading="getCommentList"
        lock-x
        ref="scroller"
        :pullup-config="{content:'',upContent:'',downContent:'释放加载更多',loadingContent:'加载中...',}"
        height="-45"
        :use-pullup="true"
        style="margin-top: 20px;padding-bottom: 100px"
      >
        <div>
          <div class="block" v-for="(item) in commentList" :key="item.id">
            <div class="commentItem">
              <div class="header">
                <img class="photo">
                <div class="name">{{item.member_name}}</div>
                <div class="starbar">
                  <!--                  <img class="star" src="@/assets/img/star.png">-->
                  <!--                  <img class="star" src="@/assets/img/star.png">-->
                  <!--                  <img class="star" src="@/assets/img/star.png">-->
                  <!--                  <img class="star" src="@/assets/img/star.png">-->
                  <!--                  <img class="star" src="@/assets/img/star-1.png">-->
                  <rater :fontSize="26" v-model="item.comment_starts" :disabled="true"></rater>
                </div>
              </div>
              <div class="time">{{item.comment_time}}</div>
              <div class="comment">{{item.comment_content}}</div>
              <div class="imagebox" v-if="item.comment_images.length">
                <div v-for="img in item.comment_images" :key="img">
                  <img class="image" :src="img">
                </div>
              </div>
            </div>
          </div>
          <load-more
            v-if="!more&&!commentList.length"
            :show-loading="false"
            :tip="'暂无数据'"
            background-color="#fbf9fe"
          ></load-more>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
  import Mall from '@/dll/mall'

  export default {
    name: 'mallComment',
    data () {
      return {
        xheader: {
          title: '评论'
        },
        goods_sku: this.$route.params.goods_sku,
        typeitems: [
          {
            text: '全部',
            comment_type: 0,
            count: 0
          },
          {
            text: '好评',
            comment_type: 1,
            count: 0
          },
          {
            text: '中评',
            comment_type: 2,
            count: 0
          },
          {
            text: '差评',
            comment_type: 3,
            count: 0
          },
          {
            text: '晒单',
            comment_type: 4,
            count: 0
          }
        ],
        typeIndex: 0,
        page: 1,
        commentList: [],
        more: true
      }
    },
    created () {
      this.getCommentInfo()
      this.getCommentList()
    },
    methods: {
      onTypeitem (index) {
        this.typeIndex = index
        this.more = true
        this.page = 1
        this.commentList = []
        this.getCommentList()
      },

      // 获取商品评论统计信息
      getCommentInfo () {
        let params = {
          goods_sku: this.goods_sku
        }
        Mall.getCommentInfo(params).then(res => {
          if (res.code == 0) {
            this.typeitems[0].count = res.data.comment_total
            this.typeitems[1].count = res.data.comment_total_good
            this.typeitems[2].count = res.data.comment_total_common
            this.typeitems[3].count = res.data.comment_total_bad
            this.typeitems[4].count = res.data.comment_total_imgs
          }
        })
      },

      // 获取评论列表
      getCommentList () {
        let page = this.page
        let params = {
          goods_sku: this.goods_sku,
          page: this.page
        }
        if (this.typeitems[this.typeIndex].comment_type == 0) {
          params.comment_type = 0
        } else {
          params.comment_type = this.typeitems[this.typeIndex].comment_type
        }

        if (!this.more) {
          return
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        Mall.getCommentList(params).then(res => {
          // if (res.code == 0) {
          //   this.commentList = res.data.list
          // }
          if (res.code == 0) {
            if (page >= res.data.total_page) {
              this.more = false
              this.$refs.scroller.disablePullup()
            } else {
              this.$refs.scroller.donePullup()
            }
            let commentList = res.data.list
            // for (let i = 0; i < commentList.length; i++) {
            //   commentList[i].com
            // }
            this.page = page + 1
            this.commentList = [].concat(this.commentList, commentList)
            this.$forceUpdate()
          } else {
            this.more = false
            this.$forceUpdate()
            this.$refs.scroller.disablePullup()
            // this.$vux.alert.show({
            //   title: "提示",
            //   content: res.msg,
            // });
          }
        }).finally(() => {
          this.$vux.loading.hide()
        })
      }
    }
  }
</script>

<style lang="less" scoped>

  .typebox {
    display: flex;
    flex-wrap: wrap;
    margin-top: -16px;
    margin-left: -16px;
  }

  .typebox > div {
    padding-top: 16px;
    padding-left: 16px;
  }

  .typebox .typeitem {
    background-color: #fff;
    width: 88px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    border-radius: 44px;
    font-size: 12px;
    color: #351009;
  }

  .typebox .typeitem.active {
    background: #b02910;
    color: #fff;
  }

  .commentItem {
    display: block;
    background-color: #fff;
    padding: 24px 12px;
  }

  .commentItem .header {
    display: flex;
    align-items: center;
  }

  .commentItem .header > div {
    margin-left: 12px;
  }

  .commentItem .photo {
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background-color: #f5f5f5;
  }

  .commentItem .name {
    font-size: 14px;
    color: #351009;
    line-height: 20px;
    width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .commentItem .starbar {
    display: flex;
    align-items: center;
  }

  .commentItem .starbar .star {
    width: 22px;
    height: 22px;
    display: block;
    margin-right: 3px;
  }

  .commentItem .time {
    margin-top: 10px;
    font-size: 12px;
    color: #d1c8c6;
    line-height: 17px;
  }

  .commentItem .comment {
    margin-top: 12px;
    font-size: 12px;
    color: #351009;
    line-height: 17px;
  }

  .commentItem .imagebox {
    display: flex;
    flex-wrap: wrap;
    margin-left: -14px;
  }

  .commentItem .imagebox > div {
    width: 33.333333%;
    box-sizing: border-box;
    padding-top: 12px;
    padding-left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commentItem .imagebox .image {
    height: 100px;
    width: 100px;
    display: block;
    background-color: #f5f5f5;
  }
</style>
